
<template>
    <base-node type="ai_rewrite" :config="props.data" :id="props.id" ref="baseNode">
        <template #default>
            <label>上下文条数</label>
            <n-input-number round style="width: 100%" :precision="0" min="0"
                            v-model:value="props.data.rewriteConfig.limit" placeholder="请输入查询条数" max="20">
            </n-input-number>

            <AiChatSetting v-model="props.data.llmConfig" :out="['modelType','promptTpl',]"
                           :inner="['systemRole','maxTokens', 'temperature', 'topP', 'topK']"  />
        </template>


        <template #footer>
            <p class="tc-gray ">输出字段</p>
            <div class="output mt-8 pad-8 fx fx-c_center fx-m_between">
                <div class="fx fx-c_center">
                    <div class="output-flag noshrink"></div>
                    <n-input v-model:value="props.data.rewriteConfig.outputField" placeholder="字段名"
                             class="tc-gray ml-8 w-120"></n-input>
                </div>
                <span class="tc-assist">AI生成的回答</span>
            </div>
        </template>

        <template #source>
            <Handle type="source" id="success" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% - 30px))" />
            <Handle type="source" id="fail" :position="Position.Right"
                    style="transform: translate(50%, calc(-50% + 30px))" />
        </template>
    </base-node>
</template>
<script setup>
	import {
		Position,
		Handle,
		useNode
	} from '@vue-flow/core'
	import AiChatSetting from './cnps/AiChatSetting.vue';
	import {
		ref,
		watch,
		provide,
        inject
	} from "vue";
    import BaseNode from "@/views/app/chain/nodes/BaseNode.vue";

	const props = defineProps(['id', 'data'])
	provide('currentNodeId', props.id);

    const baseNode = ref(null);
    provide("baseNode", baseNode)
</script>


<style scoped>

	label {
		margin-bottom: 8px;
	}

	label:not(:first-child) {
		margin-top: 16px;
	}

	.output {
		background: rgb(249, 250, 251);
		border-radius: 12px;
	}

	.output-flag {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #22c55e;
	}
</style>